<!--
 * @Author: 哈兰德
 * @Description: 分割组件
-->
<template>
  <div class="division-editor">
    <editor-panel title="分割属性">
      <el-form
        label-position="right"
        size="mini"
        label-width="70px"
        @submit.native.prevent
      >
        <el-form-item label="分割类型">
          <div>
            <el-radio-group v-model="layout" style="width: 200px" @change="changeLayout">
              <el-radio :label="1">
                辅助空白
              </el-radio>
              <el-radio :label="2">
                辅助线
              </el-radio>
            </el-radio-group>
          </div>
        </el-form-item>
        <el-form-item label="空白高度">
          <div class="form-slide">
            <el-slider
              v-model="h"
              :min="5"
              :max="100"
              :step="1"
              show-input
              @change="changeH"
            />
          </div>
        </el-form-item>
      </el-form>
      <div v-if="layout === 2">
        <div class="el-card__header">
          辅助线样式
        </div>
        <el-form
          label-position="right"
          style="margin-top: 10px"
          size="mini"
          label-width="70px"
        >
          <el-form-item label="样式">
            <div>
              <el-radio-group v-model="borderType" @change="changeBorderType">
                <el-radio label="solid">
                  实线
                </el-radio>
                <el-radio label="dashed">
                  虚线
                </el-radio>
                <el-radio label="dotted">
                  点线
                </el-radio>
              </el-radio-group>
            </div>
          </el-form-item>
          <el-form-item label="边距">
            <div>
              <el-radio-group v-model="borderMargin" @change="changeBorderMargin">
                <el-radio :label="0">
                  无边距
                </el-radio>
                <el-radio :label="10">
                  左右留边
                </el-radio>
              </el-radio-group>
            </div>
          </el-form-item>
          <el-form-item label="颜色">
            <div class="colorPicker">
              <div>
                <el-color-picker
                  v-model="borderColor"
                  @change="changeColor"
                />
              </div>
              <span class="reset-span" @click="resetColor">重置</span>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </editor-panel>
  </div>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'
import EditorPanel from '@/components/properties/common/EditorPanel'
export default {
  components: {
    EditorPanel
  },
  data () {
    return {
      h: 30,
      layout: 1,
      borderType: 'solid',
      borderMargin: 0,
      borderColor: '#E6E8EB',
      tag: true
    }
  },
  computed: {
    ...mapGetters('main', ['selectedComponent', 'pageContent'])
  },
  mounted () {
    this.fillDataToForm()
  },
  methods: {
    ...mapMutations('main', ['editComponent']),
    ...mapMutations('step', ['stepsAdd1']),
    fillDataToForm () {
      this.layout = this.selectedComponent.layout
      this.h = this.selectedComponent.h
      this.borderType = this.selectedComponent.borderType
      this.borderMargin = this.selectedComponent.borderMargin
      this.borderColor = this.selectedComponent.borderColor
    },
    changeLayout () {
      let data = {
        _id: this.selectedComponent._id,
        field: 'layout',
        value: this.layout
      }
      this.editComponent(data)
      this.addStep()
    },
    changeBorderType () {
      let data = {
        _id: this.selectedComponent._id,
        field: 'borderType',
        value: this.borderType
      }
      this.editComponent(data)
      this.addStep()
    },
    changeBorderMargin () {
      let data = {
        _id: this.selectedComponent._id,
        field: 'borderMargin',
        value: this.borderMargin
      }
      this.editComponent(data)
      this.addStep()
    },
    resetColor () {
      this.borderColor = '#E6E8EB'
      this.changeColor('#E6E8EB')
    },
    changeColor (val) {
      let data = {
        _id: this.selectedComponent._id,
        field: 'borderColor',
        value: val
      }
      this.editComponent(data)
    },
    changeH (v) {
      this.editComponent({
        _id: this.selectedComponent._id,
        field: 'h',
        value: v
      })
      this.addStep()
    },
    addStep () {
      if (!this.tag) return
      this.tag = false
      setTimeout(() => {
        this.stepsAdd1(this.pageContent)
      }, 200)
      setTimeout(() => {
        this.tag = true
      }, 1000)
    }
  }
}
</script>
<style lang="less" scoped>
.division-editor {
  // width: 400px;
  margin-top: 10px;
  .input-block {
    margin-left: 10px;
    display: flex;
    flex-direction: column;
  }
  .flex-row-center {
    margin-top: 10px;
    display: flex;
    justify-content: center;
    padding-bottom: 10px;
  }
  .image-list {
    margin-top: 10px;
    display: flex;
    align-items: center;
    padding-left: 10px;
  }
  .uploadBtn {
    border: 1px solid #ccc;
    width: 80px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ccc;
  }
  .reset-span {
    padding-left: 10px;
    cursor: pointer;
    color: #409eff;
  }
  .colorPicker {
    display: flex;
    flex-direction: row;
  }
  .product-uploaded {
    color: rgb(255, 90, 90);
  }

  .el-card {
    border: 0 !important;
  }
  .el-card__header {
    background-color: #f5f7fa !important;
    padding: 0 20px;
    height: 40px;
    line-height: 40px;
    color: #409eff;
    border: 0;
    i {
      margin-left: 205px;
      font-size: 16px;
    }
  }
  .el-card__body {
    padding: 0px;
    .el-form-item {
      margin-bottom: 10px;
    }
    .form-slide {
      margin-top: -5px;
      margin-left: 5px;
    }
    .el-icon-question {
      font-size: 14px;
    }
    .question {
      font-size: 20px;
      color: #fff;
      vertical-align: middle;
      margin: 5px 0 0 10px;
      position: absolute;
    }
    .tc {
      .el-input__inner {
        text-align: center;
      }
    }
  }
}
</style>